<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="/static/webAPP/css/reset.css">
<title>机器定位</title>  
<style type="text/css">  
html{height:100%}  
body{height:90%;margin:0px;padding:0px} 

/*头部 导航栏*/
.zjzz-buylist-top {
	position: fixed;
	width: 100%;
	height: 45px;
	line-height: 45px;
	z-index: 9999;
	top: 0;
	left: 0;
	color: #333333;
	background: #FFFFFF;
	text-align: center;
	border-bottom: 1px solid #F3F3F3;
}
.zjzz-buylist-t1,
.zjzz-buylist-t2{
	float: left;
}
.zjzz-buylist-t1 {
    width: 30%;
	height: 45px;
	line-height: 45px;
	font-size: 14px;
	background: url(./images/arrow-left.png) no-repeat 10px center;
	background-size: 20%;
}
.zjzz-buylist-t2 {
	width: 40%;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
}


#container{height:90%; width: 100%;margin-top: 45px;}
#container2{
    text-align: center;
    margin-top: 10px;
    width: 100%;
}
h4{
    text-align: center;
}

</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DouIq9pM7lqTiVOnzOQ6Q8biwgi2GIM0">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script src="/static/webAPP/js/jquery-1.8.3.min.js"></script>
</head>  
 
<body>
<div class="zjzz-buylist-top">
    <a href="javascript:history.go(-1);" class="zjzz-buylist-t1"></a>
    <span class="zjzz-buylist-t2">机器分布</span>
</div>
<div id="container"></div>
<div id="container2">
	<h4>点击选择收货机器</h4>
	<span>收货机器:<i id="machineplace"></i></span>
</div>
<script src="/static/webAPP/lib/mobile/layer.js"></script>
<script type="text/javascript"> 
// 百度地图API功能	
	var map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point(117.14860866,31.78095688), 15);
	
	var opts = {
		width : 250,     // 信息窗口宽度
		height: 80,     // 信息窗口高度
		title : "机器位置信息" , // 信息窗口标题
		enableMessage:true//设置允许信息窗发送短息
	};
	
	$.ajax({
		type: "get",
							//TODO:
		url: "/app/machineInfo/queryMachineList",
		data: '',
		dataType: "json",
		success: function(mag){
			for(var i=0;i<mag.data.length;i++){
				var marker = new BMap.Marker(new BMap.Point(mag.data[i].longitude,mag.data[i].latitude));  // 创建标注点
				var content = mag.data[i].place;
				var type = mag.data[i].type;
				var capacity = mag.data[i].capacity;
				// marker.setAnimation(BMAP_ANIMATION_BOUNCE);//标注添加动画效果
				marker.customData = mag.data[i].id
				map.addOverlay(marker);
				addClickHandler(content,marker,type,capacity);
			}
		}
	})
    //添加控件
    map.enableScrollWheelZoom(true);
	var ctrlNav = new window.BMap.NavigationControl({
		anchor: BMAP_ANCHOR_TOP_LEFT,
		type: BMAP_NAVIGATION_CONTROL_LARGE
	});
	map.addControl(ctrlNav);
	
//实现定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
	}
	else {
		alert('failed'+this.getStatus());
	}        
},{enableHighAccuracy: true})
    
	function addClickHandler(content,marker,type,capacity){
		//标注点监听事件
		marker.addEventListener("click",function(e){
			openInfo(content,e)
			sessionStorage.setItem("machineplaceId", marker.customData);
			sessionStorage.setItem("machineplace", content);
			$("#machineplace").html(content)
			if (type == 0) {
				$("#machineplace").html(content + '(收货柜)<br>可用空位<span style="color:#379EDE">' + capacity + '</span>')
				layer.open({
					content: '已选择机器收货',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}else if (type == 1) {
				$("#machineplace").html(content + '(门店)')
				layer.open({
					content: '已选择门店收货',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}else{
				$("#machineplace").html(content)
				layer.open({
					content: '已选择该地址',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}
		});
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
</script>  
</body>  
</html>